// index.ts
import { getNearbyLocations } from '../../utils/http/httpUser';

// 首先定义标记点的接口
interface Marker {
  id: number;
  latitude: number;
  longitude: number;
  width: number;
  height: number;
  iconPath?: string;
  callout?: {
    content: string;
    color: string;
    fontSize: number;
    borderRadius: number;
    bgColor: string;
    padding: number;
    display: string;
  };
}

// 定义工人信息接口
interface WorkerInfo {
  id?: number;
  name?: string;
  experience?: string;
  tags?: string[];
}

Page({
  mapCtx: null as WechatMiniprogram.MapContext | null,
  /**
   * 页面的初始数据
   */
  data: {
    latitude: 23.099994,  // 默认纬度
    longitude: 113.324520,  // 默认经度
    scale: 14,  // 地图缩放级别
    markers: [] as Marker[],  // 地图标记点，明确指定类型
    showFilterModal: false,  // 控制过滤模态框显示状态
    currentServiceType: 'all',  // 当前选中的服务类型
    serviceTypes: [
      { id: 'all', name: '全部服务' },
      { id: 'mechanical', name: '机械维修' },
      { id: 'car', name: '汽车维修' },
      { id: 'emergency', name: '应急抢修' },
      { id: 'appliance', name: '家电维修' },
      { id: 'plumbing', name: '水电维修' }
    ],
    // 半模态窗口相关状态
    showWorkerModal: false,  // 控制工人详情半模态窗口显示状态
    currentWorkerId: 0,  // 当前选中的工人ID
    workerInfo: {} as WorkerInfo,  // 工人信息
    workerImages: [] as string[],  // 工人详情图片
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.getUserLocation();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 创建地图上下文
    this.mapCtx = wx.createMapContext('myMap');
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 每次显示页面时重新获取用户位置和附近工人
    this.getUserLocation();
    
    // 移动到用户当前位置
    if (this.mapCtx) {
      this.mapCtx.moveToLocation();
    }
  },

  /**
   * 获取用户当前位置
   */
  getUserLocation() {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        });
        
        // 获取附近的工人
        this.getNearbyWorkers(res.latitude, res.longitude);
      },
      fail: () => {
        wx.showToast({
          title: '获取位置失败',
          icon: 'none'
        });
      }
    });
  },
  
  /**
   * 获取附近的工人并在地图上显示
   */
  getNearbyWorkers(latitude: number, longitude: number) {
    // 显示加载提示
    wx.showLoading({
      title: '加载附近工人...',
    });
    
    // 调用接口获取附近的工人
    getNearbyLocations({
      latitude,
      longitude,
      distance: 5.0 // 搜索半径5公里
    }).then(res => {
      if (res.code === 200 && res.data) {
        // 清空现有标记
        const markers: Marker[] = [];
        
        // 添加用户当前位置标记
        markers.push({
          id: 0,
          latitude,
          longitude,
          width: 30,
          height: 30,
          callout: {
            content: '当前位置',
            color: '#000000',
            fontSize: 12,
            borderRadius: 4,
            bgColor: '#ffffff',
            padding: 5,
            display: 'ALWAYS'
          }
        });
        
        // 添加附近工人标记
        res.data.forEach((worker, index) => {
          markers.push({
            id: worker.userId,
            latitude: worker.latitude,
            longitude: worker.longitude,
            iconPath: '../../images/worker.png',
            width: 40,
            height: 40,
            callout: {
              content: worker.nickName || `维修工人${index + 1}`,
              color: '#000000',
              fontSize: 12,
              borderRadius: 4,
              bgColor: '#ffffff',
              padding: 5,
              display: 'BYCLICK'
            }
          });
        });
        
        this.setData({ markers });
        wx.hideLoading();
      } else {
        // 如果接口调用失败，显示错误信息并使用随机生成的工人
        wx.hideLoading();
        wx.showToast({
          title: res.msg || '获取附近工人失败',
          icon: 'none'
        });
        this.generateRandomWorkers(latitude, longitude, 5);
      }
    }).catch(err => {
      // 处理请求异常
      wx.hideLoading();
      wx.showToast({
        title: '网络异常，使用模拟数据',
        icon: 'none'
      });
      console.error('获取附近工人失败：', err);
      this.generateRandomWorkers(latitude, longitude, 5);
    });
  },
  
  /**
   * 在指定位置附近随机生成维修工人（作为备用方案）
   */
  generateRandomWorkers(latitude: number, longitude: number, count: number) {
    // 清空现有标记
    const markers = [];
    
    // 添加用户当前位置标记
    markers.push({
      id: 0,
      latitude,
      longitude,
      width: 30,
      height: 30,
      callout: {
        content: '当前位置',
        color: '#000000',
        fontSize: 12,
        borderRadius: 4,
        bgColor: '#ffffff',
        padding: 5,
        display: 'ALWAYS'
      }
    });
    
    // 生成随机工人标记
    for (let i = 1; i <= count; i++) {
      // 随机生成在用户周围2公里范围内的位置
      // 经度1度约等于111公里，纬度1度约等于111公里
      // 因此0.01度约等于1.11公里
      const randomLat = latitude + (Math.random() * 0.02 - 0.01); // 随机范围±0.01度
      const randomLng = longitude + (Math.random() * 0.02 - 0.01); // 随机范围±0.01度
      
      markers.push({
        id: i,
        latitude: randomLat,
        longitude: randomLng,
        iconPath: '../../images/worker.png',
        width: 40,
        height: 40,
        borderRadius: 20, 
        callout: {
          content: `维修工人${i}`,
          color: '#000000',
          fontSize: 12,
          borderRadius: 4,
          bgColor: '#ffffff',
          padding: 5,
          display: 'BYCLICK'
        }
      });
    }
    
    this.setData({ markers });
  },

  /**
   * 移动到用户当前位置
   */
  moveToLocation() {
    if (this.mapCtx) {
      this.mapCtx.moveToLocation();
      wx.showToast({
        title: '已定位到当前位置',
        icon: 'none',
        duration: 1500
      });
    }
  },

  /**
   * 切换过滤模态框显示状态
   */
  toggleFilter() {
    this.setData({
      showFilterModal: !this.data.showFilterModal
    });
  },

  /**
   * 选择服务类型
   */
  selectServiceType(e: WechatMiniprogram.TouchEvent) {
    const type = e.currentTarget.dataset.type;
    this.setData({
      currentServiceType: type,
      showFilterModal: false
    });
    const serviceType = this.data.serviceTypes.find(item => item.id === type);
    wx.showToast({
      title: serviceType ? `已选择${serviceType.name}` : '未知服务类型',
      icon: 'none',
      duration: 1500
    });
    
    // 根据选择的服务类型重新获取用户位置和附近工人
    // 如果是全部服务，则直接获取所有工人
    // 否则，可以在后续接口中添加服务类型参数进行筛选
    this.getUserLocation();
  },

  /**
   * 如果模态框显示，点击地图时隐藏模态框
   */
  hideModalIfShown() {
    // 只处理过滤模态框
    if (this.data.showFilterModal) {
      this.setData({
        showFilterModal: false
      });
    }
  },
  
  /**
   * 处理地图标记点击事件
   */
  markertap(e: WechatMiniprogram.MarkerTap) {
    const markerId = e.detail.markerId;
    // 如果点击的是用户当前位置标记（id为0），则不做处理
    if (markerId === 0) return;
    
    // 获取点击的工人信息
    const marker = this.data.markers.find(item => item.id === markerId);
    if (marker) {
      // 获取工人名称（从callout内容中获取）
      const workerName = (marker.callout && marker.callout.content) ? marker.callout.content : `工人${markerId}`;
      
      // 显示工人详情半模态窗口
      this.showWorkerDetail(markerId, workerName);
    }
  },

  /**
   * 阻止模态框内部点击事件冒泡
   */
  preventModalClose() {
    // 阻止冒泡，防止点击模态框内部时关闭模态框
    return;
  },

  /**
   * 发布需求
   */
  publishDemand() {
    wx.showToast({
      title: '发布新需求',
      icon: 'none',
      duration: 1500
    });
    // 跳转到发布需求页面
    wx.navigateTo({
      url: '/pages/publish/publish'
    });
  },

  /**
   * 显示工人详情半模态窗口
   */
  showWorkerDetail(workerId: number, workerName: string) {
    this.setData({
      currentWorkerId: workerId,
      showWorkerModal: true
    });
    
    // 加载工人数据
    this.loadWorkerData(workerId, workerName);
  },

  /**
   * 加载工人数据
   */
  loadWorkerData(workerId: number, workerName: string) {
    // 模拟工人信息数据（与worker页面保持一致）
    const workerInfo: WorkerInfo = {
      id: workerId,
      name: workerName,
      experience: '5年',
      tags: ['机械维修', '家电维修', '水电维修']
    };

    // 工人详情图片（与worker页面保持一致）
    const workerImages = [
      'https://dtwx.net.cn:8085/static/worker0.png',
      'https://dtwx.net.cn:8085/static/worker1.png',
      'https://dtwx.net.cn:8085/static/worker2.png',
      'https://dtwx.net.cn:8085/static/worker3.png',
      'https://dtwx.net.cn:8085/static/worker0.png',
      'https://dtwx.net.cn:8085/static/worker1.png',
      'https://dtwx.net.cn:8085/static/worker2.png',
      'https://dtwx.net.cn:8085/static/worker3.png'
    ];

    this.setData({
      workerInfo,
      workerImages
    });
  },

  /**
   * 关闭工人详情半模态窗口
   */
  closeWorkerModal() {
    this.setData({
      showWorkerModal: false,
      currentWorkerId: 0,
      workerInfo: {},
      workerImages: []
    });
  },

  /**
   * 点击地图时关闭工人详情半模态窗口
   */
  hideWorkerModalIfShown() {
    if (this.data.showWorkerModal) {
      this.closeWorkerModal();
    }
    // 同时处理过滤模态框
    if (this.data.showFilterModal) {
      this.setData({
        showFilterModal: false
      });
    }
  },

  /**
   * 预览图片
   */
  previewImage(e: WechatMiniprogram.TouchEvent) {
    const src = e.currentTarget.dataset.src;
    wx.previewImage({
      current: src,
      urls: this.data.workerImages
    });
  },

  /**
   * 查看最新动态
   */
  viewNews() {
    wx.showToast({
      title: '暂无最新动态',
      icon: 'none'
    });
  },

  /**
   * 开始聊天
   */
  startChat() {
    const workerId = this.data.workerInfo && this.data.workerInfo.id ? this.data.workerInfo.id : this.data.currentWorkerId;
    const workerName = this.data.workerInfo && this.data.workerInfo.name ? this.data.workerInfo.name : `工人${this.data.currentWorkerId}`;
    
    // 关闭半模态窗口
    this.closeWorkerModal();
    
    // 跳转到聊天页面
    wx.navigateTo({
      url: `/pages/chat/chat?workerId=${workerId}&workerName=${workerName}`
    });
  },

  /**
   * 阻止工人详情模态框内部点击事件冒泡
   */
  preventWorkerModalClose() {
    // 阻止冒泡，防止点击模态框内部时关闭模态框
    return;
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})